import React,{useState} from 'react'
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table'
import {PlusOutlined, EllipsisOutlined, DeleteOutlined, EditOutlined} from '@ant-design/icons'
import {Button, Dropdown, message, Popconfirm} from 'antd'
import {getArticleServe, putArticleServe, storeArticleServe} from "@/services/article";
import CreateOrEdit from "@/pages/Article/components/CreateOrEdit";

const Article = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [editId, setEditId] = useState(undefined);

  const addOrEditArticle = async (data,vidtormd,vidtorhtml)=>{
    data.content = vidtormd
    data.content_md = vidtorhtml
    data.special_id = 1
   if (!editId){
     const requle =   await storeArticleServe(data)
     if (!requle.status) message.success( '成功')
   }else {
     const requle =  await  putArticleServe(data,editId)
     if (!requle.status) message.success( '成功')
   }
  }

const setModelOrId = (show,id= undefined)=>{
  setIsModalVisible(show);
  setEditId(id)
}

  /**
   * 获取文章列表数据
   * @param params
   * @returns {Promise<{total, data, success: boolean}>}
   */
  const getArticle = async (params)=>{
    const result =  await   getArticleServe(params)
    return {
      data: result.data,
      success:true,
      total: result.meta.pagination.total,
    }
  }

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
      // width: 48,
    },
    {
      title: '标题',
      dataIndex: 'title',
      // width: 48,
    },
    {
      title: 'read_time',
      dataIndex: 'read_time',
      // width: 48,
    },
    {
      title: '编辑',
      render: (_,record) => {
        return <div>
          <Popconfirm title="你确定要删除吗？" onConfirm={()=>{confirm(record.id)}} okText='确认'>
            <Button type="primary" shape="circle"  icon={<DeleteOutlined />} />
          </Popconfirm>&nbsp;&nbsp;
          <Button type="primary" shape="circle" onClick={() => setModelOrId(true,record.id)} icon={<EditOutlined />} />&nbsp;&nbsp;
        </div>
      }
    }
  ]

  return (
    <PageContainer>
      <ProTable
        columns={columns}
        request={async (params={}) => { return  getArticle(params)} }
        editable={{
        type: 'multiple',
      }}
        rowKey="id"
        search={{
        labelWidth: 'auto',
      }}
        pagination={{
        pageSize: 5,
      }}
        dateFormatter="string"
        headerTitle="文章管理"
        toolBarRender={() => [
        <Button key="button" onClick={()=>{setModelOrId(true)}} icon={<PlusOutlined />} type="primary">
          新建
        </Button>,
        <Dropdown key="menu"  >
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
        />

      {
        isModalVisible ?
        <CreateOrEdit
          isModalVisible={isModalVisible}
          addArticle={addOrEditArticle}
          editId={editId}
          setModelOrId={setModelOrId}
        /> : null
      }
    </PageContainer>
  );
};

export default Article;
